<template>
    <div class="FormCustomControl">

        <div v-if="!item.config" class="bodyDivClass" v-bind:class="{ active: item.active, main: item.main }">
            <div v-for="item_ in imgList">
                <div class="editImg" v-if="item.defConf==item_.key">
                    <img :src="item_.value"/>
                </div>
            </div>
        </div>
        <div class="FormCustomControl-component" v-else>
            <div class="FormCustomControl-name" v-if="item.config.showName && item.defConf!='quickEntrance'">{{item.config.name}}</div>
            <div style="flex: 1;overflow: auto" :style="[defConfList.contains(item.defConf)?'':'padding: 0px 10px;']">
              <component :localParams="localParams" :ref="item.config.alias" :appId="charBoardAppId" v-bind:is="item.defConf+'View'" :config="item.config" :viewKey="item.id" :portalId="portalId"></component>
            </div>
        </div>
    </div>
</template>

<script>
import FormCustomControlJs from "../js/FormCustomControlJs.js";
import "../components/index.js";

export default {
    name: "FormCustomControl",
    mixins:[FormCustomControlJs],
    provide(){
        return {
            appId:this.charBoardAppId
        }
    },
    props: {
        item:{},
        portalId:{},
        charBoardAppId:'',
    },
    data(){
        return{
            defConfList:['tree','myChartBoard','chartBoard','screenChart']
        }
    },
    methods:{
        /*
        是图表在tab切换调用
         */
        change(){
            if(this.item.defConf=='chart' && this.$refs[this.item.config.alias].$refs.chartComponent.initChart){
                this.$refs[this.item.config.alias].$refs.chartComponent.initChart();
            }

        },
        refreshChange(){
            this.$refs[this.item.config.alias].refreshChange();
        },
        handleCustomFun(btn){
            this.$refs[this.item.config.alias].handleCustomFun(btn);
        },
    }
}
</script>

<style scoped>
.FormCustomControl-name{
    height: 40px;
    line-height: 40px;
    padding: 0px 10px;
    border-bottom: 1px solid #dadde0;
}
.FormCustomControl{
    height: 100%;
    width: 100%;
    background: white;
    border-radius: 10px;
    overflow: hidden;
}

.bodyDivClass {
    flex: 1;
    position: relative;
    bottom: -2px;
    height: 100%;
    background-color: #fff;
    cursor: default;
    padding: 20px;
}
.bodyDivClass .itmelist {
    display: flex;
    align-items: center;
}
.bodyDivClass > ul {
    padding: 0 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 1px;
    overflow: auto;
}
.FormCustomControl-component{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
</style>
